很多舊的瀏覽器不支援比較新的 JavaScript 語法,透過 Babel 這套工具可以幫我們把新的 JavaScript 語法轉換成舊的瀏覽器可以支援的語法。
BABEL 官方連結:https://babeljs.io/
使用方法
確認有安裝 node.js,並使用在終端輸入 npm init 來初始化,建立 package.json 資料夾
安裝 babel 核心套件
npm install --save-dev @babel/core @babel/cli
安裝完之後可以看到 package.json 檔案內會自動增加兩個 devDependencies
{
"name": "babel_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6"
}
}
在 package.json 的 script 內增加 babel 指令,src 是要編譯的檔案放的資料夾,-d 是 destination 的意思,就是編譯完後檔案要放在 lib 這個資料夾
"scripts": {
"build": "babel src -d lib",
"test": "echo \"Error: no test specified\" && exit 1"
},
安裝設定檔
npm install @babel/preset-env --save-dev
在根目錄新增 .babelrc 設定檔,預設會轉換 ES2015+ 的語法
{
"presets": ["@babel/preset-env"]
}
也可以安裝其他 plugin,例如可以轉換實驗語法等
https://babeljs.io/docs/en/plugins/
為了測試,我們建立一個有 ES6 語法的檔案 test.js 在剛才的 src 資料夾
const a = 1;
const b = [1, 2, 3, 4];
const c = [...b];
for (let i of c) {
console.log(i);
}
執行編譯
npm run build
編譯結果會在 lib 資料夾內
"use strict";
function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var a = 1;
var b = [1, 2, 3, 4];
var c = [].concat(b);
var _iterator = _createForOfIteratorHelper(c),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var i = _step.value;
console.log(i);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}